<template>
  <el-row :gutter="10" style="margin-top: 30px">
    <el-col :span="16">
      <el-card>
        <template #header>
          <div class="card-header" style="display: flex;justify-content: space-between">
            <span>星级评论分析</span>
            <el-button type="primary" @click="goBack">返回</el-button>
          </div>
        </template>
        <div id="starCharts" ref="starChartRef" style="height: 300px;"></div>
        <div style="text-align: center;color: #f58147">好评率<el-icon><Select /></el-icon></div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import {ref,onMounted} from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';


const starChartRef = ref();       //星级评论图表 组件
const userInfo = ref()
const router = useRouter();
onMounted(async () => {
  userInfo.value = JSON.parse(localStorage.getItem('userInfo'))
  console.log(userInfo.value.sjid);
  const {data} = await axios.get(`/api/pingjia/userpj/${userInfo.value.sjid}`)
  console.log(data);
  const sJpingFenType = data.data.SJpingFenType;

  // 图表绘制
  initPingFenCharts(sJpingFenType);
});


//-----------------------------评分数量  饼图 ---------------------------------
const initPingFenCharts = (pingFenData) => {
  const chartDom = starChartRef.value;
  const myChart = echarts.init(chartDom);
  const option = {
    title: {
      text: '',
    },
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        name: '评分分布',
        type: 'pie',
        radius: ['20%', '80%'], // 环形图配置
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 8, // 圆角配置
          borderColor: '#fff',
          borderWidth: 2
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '14',
            fontWeight: 'bold'
          }
        },
        label: {
          show: true,
          position: 'outside',
          formatter: '{b}: {c}条评价 ({d}%)',
          fontSize: 12
        },
        labelLine: {
          show: true,
          lineStyle: {
            width: 1,
            type: 'solid'
          }
        },
        data: preparePingFenData(pingFenData)
      }
    ]
  };
  myChart.setOption(option);
}

// 清洗评分数据
const preparePingFenData = (data) => {
  let pingFenData = [];
  data.forEach(item => {
    if(item.sjpf == 1){
      pingFenData.push({
        name: '1星',
        value: item.count
      });
    }else if(item.sjpf == 2){
      pingFenData.push({
        name: '2星',
        value: item.count
      });
    }else if(item.sjpf == 3){
      pingFenData.push({
        name: '3星',
        value: item.count
      });
    }else if(item.sjpf == 4){
      pingFenData.push({
        name: '4星',
        value: item.count
      });
    }else if(item.sjpf == 5){
      pingFenData.push({
        name: '5星',
        value: item.count
      });
    }
  });
  return pingFenData;
}

// 添加返回函数
const goBack = () => {
  router.go(-1);
};
</script>

<style scoped>
.el-row {
  margin-bottom: 10px;
}

.card-header {
  color: green;
  font-size: 18px;
  letter-spacing: 1px;
}

:deep(.my-label) {
  color: darkgray;
}

:deep(.my-content) {
  color: green;
}
</style>